import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_li_ke_jie/router/router.dart';
import 'package:flutter_li_ke_jie/ui/home/my_model.dart';
import 'package:flutter_li_ke_jie/utils/img_util.dart';
import 'package:flutter_li_ke_jie/utils/navigator_util.dart';

import '../../constant/app_constant.dart';
import '../../core/interface/common_interface.dart';
import '../../style/common_color.dart';

///我的页面
class MyFragment extends StatefulWidget {
  const MyFragment({Key? key}) : super(key: key);

  @override
  _MyFragmentState createState() => _MyFragmentState();
}

class _MyFragmentState extends State<MyFragment>  with CommonInterface<MyModel>{
  late MyModel _myModel;
  bool _isLoadData = false;//是否已经加载数据

  @override
  Widget build(BuildContext context) {
    _myModel = model(context);
    if(!_isLoadData){
      _myModel.getAppUserInfo();
      _isLoadData = true;
    }
    return Scaffold(
      appBar:_appBar(),
      body: _content(),
    );
  }

  //标题
  AppBar _appBar() {
    return AppBar(
      backgroundColor: Colors.white,
      elevation: 0,
      centerTitle: true,
      title: Text("我的", style: TextStyle(
          color: color_1e, fontSize: 18, fontWeight: FontWeight.bold),),
    );
  }

  //内容
  Widget _content(){
    return Container(
      color: Colors.white,
      child: ListView(
        padding: EdgeInsets.only(left: 10,right: 10),
        children: [
          //头像
          _avatarBox(),
          SizedBox(height: 20,),
          _cardBox(),
          SizedBox(height: 20,),
          _items()
        ],
      ),
    );
  }

  //头像
  Widget _avatarBox(){
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          height: 70,
          width: 70,
          child:  Stack(
            children: [
              Container(
                alignment: Alignment.topLeft,
                width: 60,
                height: 60,
                child: ClipRRect(
                    child: Image.asset(ImageUtil.loadLocalImg("logo.png")),
                    borderRadius:BorderRadius.circular(30)
                ),
              ),
              Positioned(child: Image.asset(ImageUtil.loadLocalImg("me_vip3.png"),height: 24,width: 24,),right: 0,top: 0,)
            ],
          ),
        ),
        SizedBox(width: 10,),
        Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("${_myModel.appUser.phoneOriginal}", style: TextStyle(color: color_1e, fontSize: 18, fontWeight: FontWeight.bold),),
            Text(_myModel.vipExpireTimeStr(), style: TextStyle(color: color_999, fontSize: 16),),
          ],
        )
      ],
    );
  }

  //卡片
  Widget _cardBox(){
    return Container(
      padding: EdgeInsets.only(left: 10,right: 10,top: 10,bottom: 10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(10)),
          image: DecorationImage(
            image: AssetImage("images/3.0x/me_vip_card2.png",),
            fit: BoxFit.fill, // 完全填充
          )
      ),
      child: Column(
        children: [
          Row(
            children: [
              Image.asset(ImageUtil.loadLocalImg("me_vip.png"),height: 20,width: 20,),
              SizedBox(width: 1,),
              Text("【VIP会员】优先审批，超值权益",style: TextStyle(color: Colors.white,fontSize: 16),),
              SizedBox(width: 10,),
              //#FDF2CB
              Expanded(child:Container(
                child:  MaterialButton(
                  height: 40,
                  minWidth: 100,
                  color: Color(0xFFF4D0A1),
                  shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                  ),
                  onPressed: (){

                  },
                  child: const Text("立即领取",style: TextStyle(color: color_774418,fontSize: 14),),
                ),
              ),flex: 1,)
            ],
          ),
          SizedBox(height: 20,),
          Container(
            height: 0.5,
            width: double.infinity,
            color: color_f5,
          ),
          SizedBox(height: 20,),
          Row(
            children: [
              SizedBox(width: 10,),
              Expanded(
                child: Container(
                  child: Column(
                    children: [
                      Image.asset(ImageUtil.loadLocalImg("vip_compensate.png"),height: 50,width: 50,),
                      SizedBox(height: 10,),
                      Text("拒就赔",style: TextStyle(color: Colors.white,fontSize: 16),),
                      SizedBox(height: 20,),
                    ],
                  ),
                ),
                flex: 1,
              ),
              SizedBox(width: 10,),
              Expanded(
                child: Container(
                  child: Column(
                    children: [
                      Image.asset(ImageUtil.loadLocalImg("vip_product.png"),height: 50,width: 50,),
                      SizedBox(height: 10,),
                      Text("专属产品",style: TextStyle(color: Colors.white,fontSize: 16),),
                      SizedBox(height: 20,),
                    ],
                  ),
                ),
                flex: 1,
              ),
              SizedBox(width: 10,),
              Expanded(
                child: Container(
                  child: Column(
                    children: [
                      Image.asset(ImageUtil.loadLocalImg("vip_right.png"),height: 50,width: 50,),
                      SizedBox(height: 10,),
                      Text("生活权益",style: TextStyle(color: Colors.white,fontSize: 16),),
                      SizedBox(height: 20,),
                    ],
                  ),
                ),
                flex: 1,
              ),
            ],
          )
        ],
      ),
    );
  }
  
  //items
  Widget _items(){
      return Column(
        children: [
          Row(
            children: [
              Expanded(child: Row(
                children: [
                  Image.asset(ImageUtil.loadLocalImg("me_aboutme.png"),height: 30,width: 30,),
                  SizedBox(width: 10,),
                  Text("关于我们", style: TextStyle(color: color_1e, fontSize: 16),),
                ],
              ),flex: 1,),
              Image.asset(ImageUtil.loadLocalImg("me_next.png"),height: 20,width: 20,),
            ],
          ),
          SizedBox(height: 10,),
          Row(
            children: [
              Expanded(child: Row(
                children: [
                  Image.asset(ImageUtil.loadLocalImg("me_feedback.png"),height: 30,width: 30,),
                  SizedBox(width: 10,),
                  Text("投诉与反馈", style: TextStyle(color: color_1e, fontSize: 16),),
                ],
              ),flex: 1,),
              Image.asset(ImageUtil.loadLocalImg("me_next.png"),height: 20,width: 20,),
            ],
          ),
          SizedBox(height: 10,),
          Row(
            children: [
              Expanded(child: Row(
                children: [
                  Image.asset(ImageUtil.loadLocalImg("me_phone.png"),height: 30,width: 30,),
                  SizedBox(width: 10,),
                  Text("客服电话", style: TextStyle(color: color_1e, fontSize: 16),),
                ],
              ),flex: 1,),
              Text(service_phone, style: TextStyle(color: color_666, fontSize: 16),),
              SizedBox(width: 10,)

            ],
          ),
          SizedBox(height: 10,),
          GestureDetector(
            onTap: (){
              NavigatorUtil.goAndFinishAll(context, LOGIN_PAGE);
            },
            child: Row(
              children: [
                Expanded(child: Row(
                  children: [
                    Image.asset(ImageUtil.loadLocalImg("me_signout.png"),height: 30,width: 30,),
                    SizedBox(width: 10,),
                    Text("退出登录", style: TextStyle(color: color_1e, fontSize: 16),),
                  ],
                ),flex: 1,),
                Image.asset(ImageUtil.loadLocalImg("me_next.png"),height: 20,width: 20,),
              ],
            ),
          )
        ],
      );
  }
}
